<template>
  <div
    id="communicationlog"
    class="main-div main-div-nopadding"
  >
    <el-container>
      <el-aside
        class="background-color-white"
        style="padding: 20px 40px"
      >
        <div class="card-header-div no-float margin-bottom">
          <!--开始时间-->
          {{ $t('message.snrLog.aside.label1') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="startTime"
          type="datetime"
          :placeholder="$t('message.snrLog.aside.select1Placeholder')"
        />
        <div class="card-header-div no-float margin-bottom">
          <!--结束时间-->
          {{ $t('message.snrLog.aside.label2') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="endTime"
          type="datetime"
          :placeholder="$t('message.snrLog.aside.select2Placeholder')"
        />
        <div class="card-header-div no-float margin-bottom">
          <!--终端-->
          {{ $t('message.snrLog.aside.label3') }}
        </div>
        <div
          class="margin-bottom-25"
          style="position: relative"
        >
          <el-input
            :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
            show-word-limit
            @blur="device_error = $service.regExp.positiveInteger.test(device) || !device"
            v-model.number="device"
          />
          <div
            v-if="!device_error"
            class="el-form-item__error"
          >
            <!--请输入正整数-->
            {{ this.$t('message.validate.common.integer') }}
          </div>
        </div>
        <div>
          <el-button
            :loading="loading"
            @click="getSnrLog(true)"
            style="width: 100%"
            type="primary"
          >
            <!--查询-->
            {{ $t('message.snrLog.aside.buttonSearchText') }}
          </el-button>
        </div>
      </el-aside>
      <el-main class="el-main-padding">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              <!--数据-->
              {{ $t('message.snrLog.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--信噪比日志-->
              {{ $t('message.snrLog.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-card style="height: calc(100% - 3.5em);text-align: left">
          <el-table
            :data="snrLogTableData"
            class="table-gutter-background"
            header-cell-class-name="my-table-header-cell"
            cell-class-name="my-table-cell"
            height="calc(100% - 2.5em)"
          >
            <el-table-column
              type="index"
              width="75px"
              :index="indexMethod"
            />
            <el-table-column
              :label="$t('message.snrLog.table.header.col2')"
              prop="dateTime"
              width="250px"
            />
            <el-table-column
              prop="device"
              :label="$t('message.snrLog.table.header.col3')"
            />
            <el-table-column
              prop="snr1"
              :label="$t('message.snrLog.table.header.col4')"
            />
            <el-table-column
              prop="snr2"
              :label="$t('message.snrLog.table.header.col5')"
            />
          </el-table>
          <div style="margin-top: 10px;text-align: center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="$store.state.snrLog.snrLogCount"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import common from '@/common'
export default {
  name: 'SnrLog',
  computed: {
    snrLogTableData () {
      return this.$store.getters.getSnrLogList
    }
  },
  data () {
    return {
      loading: false,

      startTime: '',
      endTime: '',

      device: '',
      device_error: true,

      searchedParams: {                                                            
        startTime: '',
        endTime: '',
        device: ''
      },

      currentPage: 1,
      pageSize: 10
    }
  },
  mounted () {
    let self = this
    self.$store.commit('setsnrLog', [])
    self.$store.commit('setsnrLogCount', 0)
  },
  methods: {
    indexMethod (index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    validateSearch () {
      let self = this
      let validate = true
      if (!self.$service.regExp.positiveInteger.test(self.device) && self.device) {
        self.device_error = false
        validate = false
      }
      return validate
    },
    async getSnrLog () {
      let self = this
      if (!self.validateSearch()) return
      self.currentPage = 1
      try {
        self.loading = true
        await self.$store.dispatch('getSnrLogList', {
          page: self.currentPage,
          page_size: self.pageSize,

          device: self.device,

          begin: common.convertDateTime(self.startTime),
          end: common.convertDateTime(self.endTime)
        })
        self.searchedParams.startTime = self.startTime
        self.searchedParams.endTime = self.endTime
        self.searchedParams.device = self.device
      } finally {
        self.loading = false
      }
    },
    async getSnrLogByPage () {
      let self = this
      if (!self.validateSearch()) return
      try {
        self.loading = true
        await self.$store.dispatch('getSnrLogList', {
          page: self.currentPage,
          page_size: self.pageSize,

          device: self.searchedParams.device,

          begin: common.convertDateTime(self.searchedParams.startTime),
          end: common.convertDateTime(self.searchedParams.endTime)
        })
      } finally {
        self.loading = false
      }
    },
    handleSizeChange (pageSize) {
      let self = this
      self.pageSize = pageSize
      self.getSnrLogByPage()
    },
    handleCurrentChange (currentPage) {
      let self = this
      self.currentPage = currentPage
      self.getSnrLogByPage()
    }
  }
}
</script>

<style scoped>
  .no-float{
    float: none;
  }
  .margin-bottom{
    margin-bottom: 20px;
  }
  .margin-bottom-25{
    margin-bottom: 20px;
  }
</style>
